{% extends "base.html" %}

{% block title %}课程详情 - IT课程数据分析系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-title">课程详情</div>
    <div id="course-basic" style="line-height:1.8;color:#2c3e50;"></div>
</div>

<div class="card">
    <div class="card-title">成绩分布</div>
    <div id="grade-chart" style="height:400px;width:100%;"></div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
    async function initCourseDetail() {
        const courseId = {{ course_id }};
        try {
            // 基本信息
            const detail = await apiRequest(`/courses/${courseId}`);
            if (detail.success) {
                const c = detail.data;
                document.getElementById('course-basic').innerHTML = `
                    <div><strong>${c.name}</strong>（${c.code}） | ${c.credits || 0} 学分</div>
                    <div>院系：${c.department || '-'} | 学期：${c.semester || '-'}</div>
                    <div>已选人数：${c.enrollment_count || 0}</div>
                    <div style="color:#7f8c8d;">${c.description || '暂无描述'}</div>
                `;
            }

            // 成绩分布
            const grade = await apiRequest(`/analytics/courses/${courseId}/grade_distribution`);
            if (grade.success) {
                const g = grade.data.distribution || {};
                const chart = echarts.init(document.getElementById('grade-chart'));
                const labels = Object.keys(g);
                const values = Object.values(g);
                chart.setOption({
                    tooltip: {},
                    xAxis: { type: 'category', data: labels },
                    yAxis: { type: 'value', name: '人数' },
                    series: [{ type: 'bar', data: values }]
                });
                window.addEventListener('resize', () => chart.resize());
            }
        } catch (err) {
            showAlert('加载课程详情失败: ' + err.message, 'error');
        }
    }

    window.addEventListener('DOMContentLoaded', initCourseDetail);
</script>
{% endblock %}







